
<template>
	<view>
		<view class="box" >
			<view class="header_right">
				<span @click="CashRecord">提现记录</span>
				<img class="header_detailed_img" :src="icon1"
					alt="">
			</view>
			<view class="header_exchange">
				可兑换余额
			</view>
			<view class="header_examine">
				审核中
			</view>
			<u-row gutter="16">
				<u-col span="6">
					<view class="demo-layout" v-show="onpageshow">
						{{cash.integration ? '￥' + cash.integration : '￥' +0}}
					</view>
				</u-col>
				<u-col span="6">
					<view class=" bg-purple-light" v-show="onpageshow">
						{{cash.cash ? '￥' +cash.cash : '￥' +0}}
					</view>
				</u-col>
			</u-row>
			<view class="aside">
				<view class="aside_title">
					{{cash.msg ? cash.msg : '' }}
				</view>
				<view class="aside_card">
					<view class="aside_card_title">
						<img class="aside_card_img"
							:src="icon2" alt="">
						<view class="aside_card_span">
							微信快速提现
						</view>
					</view>
					<view class="aside_row">
						<view v-for="(item,index) in cash.money" :key="index" class="aside_row_child">
							<view :class="cashShow  == index ? 'aside_lists' : 'aside_list'"
								　@click="cashBtn(item,index)">
								<img class="aside_list_img" v-if="cashShow  == index"
									:src="icon3" alt="">
								<img class="aside_list_img1" v-if="item.type == 1"
									:src="icon4" alt="">
								{{item.money}}
								<p v-if="item.type == 2" class="aside_row_span">{{item.title}}</p>
							</view>
						</view>

					</view>
					<view class="aside_button" @click="applicationFn">
						立即提现
					</view>
					<p class="aside_p"> {{msg}}</p>
					<p class="aside_p" @click="ruleFn">活动规则</p>
				</view>

			</view>
			<view class="popup" v-if="errorShow">
				<view class="errorShows">
					{{errorShowText}}
				</view>
			</view>
		</view>
		<view>
			<coral-adv :appid="appid" :type="type" 　 :isshow="isshow" @loadCb="loadCb" @finishedCb="finishedCb"
				@quitCb="quitCb" @errorCb="errorCb"></coral-adv>
		</view>
		<view class="popups" v-if="advertisementShow">
			<u-loading class="uLoading" mode="circle" size="60" :show="true"></u-loading>
			<view class="uLoading-text">
				加载中...
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				errorShow: false,
				cash: {},
				cashShow: 0,
				uid: '',
				errorShowText: '',
				appid: 100073,
				type: 2,
				isshow: false,
				price: null,
				prices:null,
				types: null,
				onpageshow: false,
				showLoading: false,
				// loading
				advertisementShow:false,
				msg:'' ,
				icon1:this.$imgUrl+'makeMoney/youjiatou.png',
				icon2:this.$imgUrl+'makeMoney/weixinIcon.png',
				icon3:this.$imgUrl+'makeMoney/tixiandui.png',
				icon4:this.$imgUrl+'makeMoney/tixianshouci.png',
				website:'',
			}

		},
		onLoad() {

			
		},
		onShow() {
			this.getFangCash();
		},
		methods: {
			// 跳转到活动规则
			ruleFn() {
				this.$utils.jumpWebview(this.cash.data.url);
				/* uni.navigateTo({
					url: "/pages/webview/index?url=" +encodeURIComponent(JSON.stringify (this.cash.data.url))
				}) */
			},
			// 提现选项确认
			cashBtn(item, index) {
				this.cashShow = index;
				this.price = item.contrast;
				this.prices = item.price;
				this.types = item.type;
				this.msg = item.cahs_msg;
			},
			// 提现首页内容
			getFangCash() {
				/* this.showLoading = true; */
				this.onpageshow = false;
				this.$u.api.getFangCash({
					userid_locked: uni.getStorageSync('userId'),
				}).then(res => {
					this.cash = res.data;
					if (!this.price) {
						this.price = res.data.money[this.cashShow].contrast;
					}
					this.msg = res.data.money[this.cashShow].cahs_msg;
					this.prices = res.data.money[this.cashShow].price;
					this.types = res.data.money[this.cashShow].type;
					this.website =  res.data.website;
					this.onpageshow = true;
					/* this.showLoading = false; */
				}).catch((error) => {
					console.log(error);
				});
			},
			// 立即提现
			applicationFn() {
				if (Number(this.price) > Number(this.cash.integration)) {
					this.errorShowText = '余额不足无法提现';
					this.errorShow = true;
					setTimeout(() => {
						this.errorShow = false;
					}, 2000)
					this.isshow = false;
				} else {
					if (this.types == 1) {
						this.getCash();
					} else {
						if (this.website.website_open == 1) {
							this.advertisementShow = true;
							this.isshow = true;
						} else if (this.website.website_open == 2) {
							this.$utils.jumpWebview(this.website.website_url); 
						}
						
						setTimeout(()=>{
						this.advertisementShow = false;	
						},500)
					}
				}
			},
			// 提现记录页面
			CashRecord() {
				uni.navigateTo({
					url: '/pages/makeMoney/WithdrawalRecords',
				});
			},
			// 提现接口
			getCash() {
				this.$u.api.getCash({
					userid_locked: uni.getStorageSync('userId'),
					uid: uni.getStorageSync('uid'),
					price: this.prices,
				}).then(res => {
					if (res.result_code == 360) {
						this.getFangCash();
						this.errorShowText = res.msg;
						this.errorShow = true;
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/makeMoney/Withdrawal?price=' + this.price,
							});
							this.errorShow = false;
						}, 2000)

					} else {
						console.log(res.msg);
						this.errorShowText = res.msg;
						this.errorShow = true;
						setTimeout(() => {
							this.errorShow = false;
						}, 2000)
					}
				}).catch((error) => {
					console.log(error);
				});
			},
			// 判断广告是否加载完成
			loadCb(e) {
				console.log('loadCb', e.detail); // {ret: 0, msg: "广告加载完成"}
			},
			// 观看完成的回调
			finishedCb(e) {
				this.isshow = false;
				this.getCash();
			},
			// 中途退出的回调
			quitCb(e) {
				this.isshow = false;
			},
			// 判断广告是否加载失败
			errorCb(e) {
				console.log(e, 广告加载);
				this.isshow = false;

			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		width: 100%;
		height: 638rpx;
		padding-bottom: 20rpx;
		background: url(https://imageapi.cd1a.cn/uni/makeMoney/shouyebeijin.png) no-repeat;
		background-size: 100% 100%;
	}

	.header_right {
		padding-top: 106rpx;
		float: right;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.header_detailed_img {
		margin: 10rpx 20rpx 0 10px;
		float: right;
		width: 12rpx;
		height: 20rpx;
	}

	.header_exchange {
		padding: 144rpx 0 0 50rpx;
		font-size: 24rpx;
		font-weight: 800;
		color: #FFFFFF;
	}

	.header_examine {
		margin: 2rpx 0 0 446rpx;
		font-size: 24rpx;
		font-weight: 800;
		color: #FFFFFF;
	}

	.demo-layout {
		margin-left: 34rpx;
		font-size: 88rpx;
		font-weight: 800;
		color: #FFFFFF;
	}

	.bg-purple-light {
		margin: 40rpx 0 0 80rpx;
		font-size: 52rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 61rpx;
	}

	.aside {
		overflow: hidden;
		box-sizing: border-box;
		margin-top: 46px;
		width: 100%;
		height: 1144rpx;
		background: rgba(0, 0, 0, 0.35);
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
	}

	.aside_title {
		margin: 0 0 20rpx 0;
		padding-top: 20rpx;
		width: 100%;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}

	.aside_card {
		width: 750rpx;
		height: 1144rpx;
		background: #FFFFFF;
		opacity: 1;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
	}

	.aside_card_title {
		padding: 44rpx 0 0 32rpx;
	}

	.aside_card_img {
		float: left;
		width: 46rpx;
		height: 46rpx;
	}

	.aside_card_span {

		float: left;
		margin-left: 10rpx;
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.aside_row {
		margin-top: 120rpx;
		width: 100%;

	}

	.aside_row_child {
		display: inline-block;
	}

	.aside_row .aside_list {
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin: 20rpx 0 0 25rpx;
		padding-top: 17px;
		width: 216rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #666666;
		border: 2rpx solid #DFDFDF;
		opacity: 1;
		text-align: center;
	}

	.aside_row .aside_lists {
		overflow: hidden;
		position: relative;
		display: inline-block;
		margin: 20rpx 0 0 25rpx;
		padding-top: 17px;
		width: 216rpx;
		height: 120rpx;
		color: #FF6B00;
		border: 2rpx solid #FF6B00;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		text-align: center;
	}

	.aside_list_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 52rpx;
		height: 52rpx;
	}

	.aside_list_img1 {
		position: absolute;
		top: 0;
		right: 0;
		width: 104rpx;
		height: 28rpx;
	}

	.aside_row_span {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}

	.aside_button {
		margin: 114rpx 5% 0;
		width: 90%;
		height: 100rpx;
		background: linear-gradient(180deg, #FFA976 0%, #FF5A0D 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-size: 36rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}

	.aside_p {
		margin-top: 36rpx;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.popup {
		position: fixed;
		top: 40%;
		left: 125rpx;
		width: 506rpx;
		height: 258rpx;
		background: #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 0.65;
		z-index: 99999;
	}

	.errorShows {
		text-align: center;
		line-height: 258rpx;
		font-size: 30rpx;
		color: #F5F5F5;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
	}
	.popups {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.6);
	}
</style>